<div>
  <div class="protractor-header">
    <span class="protractor-logo"></span>
  </div>

  <div class="text-center">
    <a class="btn btn-large btn-danger github-button" href="https://github.com/angular/protractor">
      <img src="img/GitHub-Mark-Light-32px.png" alt="github logo"/>View on GitHub
    </a>
  </div>

  <div ptor-twitter></div>

  <p class="lead">
    Protractor is an end-to-end test framework for Angular and AngularJS applications.
    Protractor runs tests against your application running in a real browser,
    interacting with it as a user would.
  </p>

  <div class="row">
    <div class="col-sm-4">
      <h3>Test Like a User</h3>
      Protractor is built on top of WebDriverJS, which uses native events
      and browser-specific drivers to interact with your application as a user
      would.
    </div>
    <div class="col-sm-4">
      <h3>For Angular Apps</h3>
      Protractor supports Angular-specific locator strategies, which allows you
      to test Angular-specific elements without any setup effort on your part.
    </div>
    <div class="col-sm-4">
      <h3>Automatic Waiting</h3>
      You no longer need to add waits and sleeps to your test. Protractor can
      automatically execute the next step in your test the moment the webpage
      finishes pending tasks, so you don’t have to worry about waiting for your
      test and webpage to sync.
    </div>
  </div>

  <div class="row example">
    <div class="col-md-12">
      <h2>Setup</h2>
      <p>
        Use npm to install Protractor globally with:
      </p>
      <pre>npm install -g protractor</pre>
      <p>
        This will install two command line tools, <code>protractor</code> and
        <code>webdriver-manager</code>. Try running
        <code>protractor --version</code> to make sure it's working.
      </p>
      <p>
        The <code>webdriver-manager</code> is a helper tool to easily get an
        instance of a Selenium Server running. Use it to download the necessary
        binaries with:
      </p>
      <pre>webdriver-manager update</pre>
      <p>
        Now start up a server with:
      </p>
      <pre>webdriver-manager start</pre>
      <p>
        This will start up a Selenium Server and will output a bunch of info
        logs. Your Protractor test will send requests to this server to control
        a local browser. You can see information about the status of the server
        at
        <a href="http://localhost:4444/wd/hub" target="_blank">http://localhost:4444/wd/hub</a>.
      </p>
    </div>
  </div>
  <div class="row example">
    <div class="col-md-12">
      <h2>Write a test</h2>
      <p>
        Open a new command line or terminal window and create a clean folder
        for testing.
      </p>
      <p>
        Protractor needs two files to run, a spec file and a configuration file.
      </p>
      <p>
        Let's start with a simple test that navigates to the todo list example
        in the AngularJS website and adds a new todo item to the list.
      </p>
      <p>Copy the following into <code>todo-spec.js</code>:</p>
      <div>
<pre><code class="lang-js">
describe('angularjs homepage todo list', function() {
  it('should add a todo', function() {
    browser.get('https://angularjs.org');

    element(by.model('todoList.todoText')).sendKeys('write first protractor test');
    element(by.css('[value="add"]')).click();

    var todoList = element.all(by.repeater('todo in todoList.todos'));
    expect(todoList.count()).toEqual(3);
    expect(todoList.get(2).getText()).toEqual('write first protractor test');

    // You wrote your first test, cross it off the list
    todoList.get(2).element(by.css('input')).click();
    var completedAmount = element.all(by.css('.done-true'));
    expect(completedAmount.count()).toEqual(2);
  });
});
</code></pre>
      </div>
      <p>
        The <code>describe</code> and <code>it</code> syntax is from the Jasmine
        framework. <code>browser</code> is a global created by Protractor,
        which is used for browser-level commands such as navigation with
        <code>browser.get</code>.
      </p>
    </div>
  </div>
  <div class="row example">
    <div class="col-md-12">
      <h2>Configuration</h2>
      <p>
        Now create the configuration file. Copy the following into
        <code>conf.js</code>:
      </p>
<pre><code class="lang-js">
exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['todo-spec.js']
};
</code></pre>
      <p>
        This configuration tells Protractor where your test files
        (<code>specs</code>) are, and where to talk to your Selenium Server
        (<code>seleniumAddress</code>). It will use the defaults for all other
        configuration. Chrome is the default browser.
      </p>
    </div>
  </div>
  <div class="row example">
    <div class="col-md-12">
      <h2>Run the test</h2>
      <p>Now run the test with:</p>
      <pre>protractor conf.js</pre>
      <p>
        You should see a Chrome browser window open up and navigate to the
        todo list in the AngularJS page, then close itself (this should be very
        fast!). The test output should be
        <code>1 test, 3 assertions, 0 failures</code>. Congratulations, you've
        run your first Protractor test!
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <h2>Learn More</h2>
      <p>Learn more with the
        <a href="#/tutorial">Tutorial</a>.
      </p>
    </div>
  </div>
</div>
